import { IconProp } from "@fortawesome/fontawesome-svg-core";
import classNames from "classnames";
import { ChangeEvent, FC, InputHTMLAttributes, ReactElement, useState } from "react";
import Icon from "../Icon/Icon";

/** Input组件属性 */
export interface InputProps extends Omit<InputHTMLAttributes<HTMLElement>, 'size'> {
    /** 禁用状态 */
    disabled?: boolean;
    /** 输入框尺寸 */
    size?: 'lg' | 'sm';  // 由于Input原生属性中有这个属性，并且为number类型，因此上面使用Omit忽略原生的size属性
    /** 输入框带图标 */
    icon?: IconProp;
    /** 输入框前缀 */
    prepand?: string | ReactElement;
    /** 输入框后缀 */
    append?: string | ReactElement;
    /** 输入值回调 */
    onValueChange?: (value: string) => void;
}

/** Input组件 */
const Input: FC<InputProps> = (props) => {

    // 1. 解构属性
    const { onValueChange, disabled, size, icon, prepand, append, className, style, value, ...restProps } = props;

    // 2. 构建class类名
    const classes = classNames('kd-input', className, {
        [`kd-input-${size}`]: size,
        'is-icon': icon,
        'is-disabled': disabled,
    });

    // 受控组件配置
    // const [value, setValue] = useState(inputValue);

    function handleChange(e: ChangeEvent<HTMLInputElement>) {
        const newValue = e.target.value;
        // setValue(newValue);
        if (onValueChange) {
            onValueChange(newValue);
        }
    }

    return (
        <div className={classes} style={style}>
            {prepand && (<div className="kd-input-add">{prepand}</div>)}
            <div className="kd-input-wrapper">
                <input
                    type="text"
                    value={value}
                    onChange={handleChange}
                    disabled={disabled}
                    {...restProps}
                />
                {icon && <div className="kd-input-icon"><Icon icon={icon} /></div>}
            </div>
            {append && (<div className="kd-input-add">{append}</div>)}
        </div>
    )
}

export default Input;